import React,{ Component,useState } from 'react'
import {
    Button,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    InputNumber,
    Collapse,
    message,
    Modal,
    Dropdown,
    Menu,
} from 'antd';
import { runInAction } from 'mobx'
import {OpenDeleteConfirm} from 'legions-lunar/antd-toolkit'

import FormBasePropertyConfig,{ IHLFormUtils } from '../property.config/formBasePropertyConfig';
import { PropertyFormElementFormFieldsRule,PropertyFormElementFormFields,PropertyFormGroupGlobalFormFields } from '../../models/form/propertyFormElement';
import FormProerty from '../../containers/components.property/formProperty';
import { INPUT_ADDON_AFTER_BUTTON,FORMSELECTPRAMS,FORMSELECTTRANSFORM,FORMSELECTTOKEN, FORM_MAPPING_ENTITY_CODES } from '../../constants/code/formConfigCode';
import { PropertyKeyValueFormFieldsRule } from '../../models/form/propertyFormModel';
import { QuestionTooltip } from '../questionTooltip/questionTooltip';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import AddSelectOptions from '../../containers/components.widget/addSelectOptions';
import { LegionsProForm } from 'legions-pro-design';
const { Panel } = Collapse;
interface IProps { }
interface IState { }
const Question = (lable: string,title: string) => {
    return (<QuestionTooltip label={lable} title={title}></QuestionTooltip>)
}
@fullProvider(FormPropertyCommonConfig)
export default class FormPropertyCommonConfig {
    @lazyInject(FormBasePropertyConfig)
    public formBasePropertyConfig!: FormBasePropertyConfig
    createGroupConfig() {
        const rules =PropertyFormGroupGlobalFormFields.initFormRules<PropertyFormGroupGlobalFormFields,{}>(PropertyFormGroupGlobalFormFields,null)
        const formUtils = this.formBasePropertyConfig.createFormUtils()
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'name',
            label: '分组名称',
            rules: rules.name,
        })
        /* this.renderInputConfig(formUtils,{
            name: 'groupId',
            label:'分组标识',
            rules:rules.groupId,
            type:'number',
        }) */
        this.formBasePropertyConfig.renderSwitchConfig(formUtils,{
            name: 'isFolding',
            label: '是否折叠',
            rules: rules.isFolding,
        })
        this.formBasePropertyConfig.renderSwitchConfig(formUtils,{
            name: 'isShowFormSizeIcon',
            label: '是否允许设置表单大小',
            rules: rules.isShowFormSizeIcon,
        })
        return [
            formUtils.getFormConfig('name'),
            /* formUtils.getFormConfig('groupId'), */
            formUtils.getFormConfig('isShowFormSizeIcon'),
            formUtils.getFormConfig('isFolding'),
        ]
    }
    /** 生成表单全局属性配置 */
    createConfig(options: { instance: FormProerty }) {
        const formPropertyApp = options.instance.props.store.context.formPropertyApp;
        const rules = this.formBasePropertyConfig.createRulesInstance<PropertyFormElementFormFieldsRule>(PropertyFormElementFormFieldsRule);
        const formUtils = this.formBasePropertyConfig.createFormUtils()
        this.formBasePropertyConfig.renderRadioButtonConfig(formUtils,{
            name: 'layout',
            label: '布局',
            rules: rules.layout,
            options: [{
                label: '单列',
                value: '1',
            },{
                label: '两列',
                value: '2',
            },{
                label: '三列',
                value: '3',
            },{
                label: '四列',
                value: '4',
            }]
        })
        this.formBasePropertyConfig.renderRadioButtonConfig(formUtils,{
            name: 'sizes',
            label: '尺寸',
            rules: rules.sizes,
            options: [{
                label: '正常',
                value: 'default',
            },{
                label: '迷你',
                value: 'small',
            },{
                label: '紧凑',
                value: 'table',
            }]
        })
        this.formBasePropertyConfig.createDataOrginSource(formUtils,{
            name: 'groupList',
            label: '分组',
            rules: rules.groupList,
            options: [],
            onAdd: () => {
                options.instance.modalRef.viewModel.visible = true;
                options.instance.modalRef.viewModel.title = '添加分组';
                const timeid = setTimeout(() => {
                    options.instance.clearGroupFormData()
                    clearTimeout(timeid)
                },50)
            },
            onEdit: () => {
                const InputDataModel: PropertyFormElementFormFields = formPropertyApp.formProperyCommonRef.viewModel.InputDataModel as PropertyFormElementFormFields
                if (!InputDataModel.groupList.value) {
                    message.warning('请先选择需要编辑的分组');
                    return;
                }
                options.instance.modalRef.viewModel.visible = true;
                options.instance.modalRef.viewModel.title = '编辑分组';
                const item = formPropertyApp.propertyFormationVM.group.find((model) => model.id.toString() === InputDataModel.groupList.value.key)
                const value = PropertyFormGroupGlobalFormFields.dataToFormFields<PropertyFormGroupGlobalFormFields,{}>(new PropertyFormGroupGlobalFormFields(),item)
                options.instance.formGroupRef.store.updateFormInputData(options.instance.formGroupRef.uid,value)
            },
            onDelete: () => {
                if (!options.instance.getFormComponentPropertyViewModel.groupList.value) {
                    message.warning('请先选择需要删除的分组');
                    return;
                }
                const _oldIndex = formPropertyApp.propertyFormationVM.group.findIndex((item) => item.id.toString() === options.instance.getFormComponentPropertyViewModel.groupList.value.key)
                formPropertyApp.propertyFormationVM.group.splice(_oldIndex,1);
                message.success('删除成功');
            }
        })
        return [
            formUtils.getFormConfig('layout'),
            formUtils.getFormConfig('sizes'),
            formUtils.getFormConfig('groupListRender'),
        ]
    }
    createAddSelectOptionsValue(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: { addSelectValueInstance: AddSelectOptions }) {
        const formPropertyApp = options.addSelectValueInstance.props.store.context.formPropertyApp;
        const projectCommonApp = options.addSelectValueInstance.props.store.context.projectCommonApp;
        formUtils=formUtils||this.formBasePropertyConfig.createFormUtils()
        const rules = this.formBasePropertyConfig.createRulesInstance<PropertyKeyValueFormFieldsRule>(PropertyKeyValueFormFieldsRule);
        return [
            ...this.formBasePropertyConfig.createApiParamsComponen(formUtils,{
                switchOptions: [{
                    name: 'isRemote',
                    label: '远程搜索',
                    rules: rules.isRemote,
                    onChange: (value) => {
                    }
                },{
                    name: 'isPageing',
                    label: '分页',
                    rules: rules.isPageing,
                    onChange: (value) => {
                    }
                }],
                apiOptions: {
                    name: 'apiUrl',
                    label: '请求接口',
                    rules: rules.apiUrl,
                },
                tokenOptions: {
                    name: 'token',
                    label: '权限令牌',
                    rules: rules.token,
                    onEdit: () => {
                        runInAction(() => {
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.visible = true;
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.title = '编辑表达式'
                            projectCommonApp.formSelectValueModalRef.viewModel.visible = false;
                            const item = projectCommonApp.getAddSelectValueFormPropertyValue('token')
                            formPropertyApp.propertyFormationVM.editComponentData.property = 'token';
                            formPropertyApp.propertyFormationVM.codeValue = item ? (item) : FORMSELECTTOKEN;
                            formPropertyApp.propertyFormationVM.codeEditorprop.readOnly = false;
                        })

                    }
                },
                methodOptions: {
                    name: 'method',
                    label: '请求方式',
                    rules: rules.method,
                },
                paramsOptions: {
                    name: 'params',
                    label: '请求参数',
                    rules: rules.params,
                    onEdit: () => {
                        runInAction(() => {
                            const item = projectCommonApp.getAddSelectValueFormPropertyValue('params')
                            projectCommonApp.formSelectValueModalRef.viewModel.visible = false;
                            formPropertyApp.propertyFormationVM.editComponentData.property = 'params';
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.visible = true;
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.title = '编辑表达式'
                            formPropertyApp.propertyFormationVM.codeValue = item ? (item as string) : FORMSELECTPRAMS;
                            formPropertyApp.propertyFormationVM.codeEditorprop.readOnly = false;
                        })

                    }
                },
                transformOptions: {
                    name: 'transform',
                    label: '数据变换',
                    rules: rules.transform,
                    onEdit: () => {
                        runInAction(() => {
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.visible = true;
                            projectCommonApp.formSelectValueModalRef.viewModel.visible = false;
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.title = '编辑表达式'
                            const item = projectCommonApp.getAddSelectValueFormPropertyValue('transform')
                            formPropertyApp.propertyFormationVM.editComponentData.property = 'transform';
                            formPropertyApp.propertyFormationVM.codeValue = item ? (item as string) : FORMSELECTTRANSFORM;
                            formPropertyApp.propertyFormationVM.codeEditorprop.readOnly = false;
                        })
                    }
                },
                mappingEntityOptions: {
                    name: 'mappingEntity',
                    label: '服务端数据转换',
                    rules: rules.mappingEntity,
                    onEdit: () => {
                        runInAction(() => {
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.visible = true;
                            projectCommonApp.formSelectValueModalRef.viewModel.visible = false;
                            projectCommonApp.formAddKeyValueCodeExpressionModalRef.viewModel.title = '编辑表达式';
                            const item = projectCommonApp.getAddSelectValueFormPropertyValue('mappingEntity');
                            formPropertyApp.propertyFormationVM.editComponentData.property = 'mappingEntity';
                            formPropertyApp.propertyFormationVM.codeValue = item ? (item as string) : FORM_MAPPING_ENTITY_CODES;
                            formPropertyApp.propertyFormationVM.codeEditorprop.readOnly = false;
                            console.log(item,'itemitemitem');
                        })
                    }
                },
                /* vmodelOptions: {
                    name: 'model',
                    label: 'model',
                    rules: rules.model,
                    onEdit: () => {
                        formPropertyApp.formAddKeyValueCodeExpressionModalRef.viewModel.visible = true;
                        formPropertyApp.formSelectValueModalRef.viewModel.visible = false;
                        formPropertyApp.formAddKeyValueCodeExpressionModalRef.viewModel.title = '编辑表达式(只读)'
                        runInAction(() => {
                            formPropertyApp.propertyFormationVM.codeValue = FORMSELECTMODEL
                            formPropertyApp.propertyFormationVM.codeEditorprop.readOnly = true;
                        })
                    }
                } */
            })
        ]
    }
    
}